<template>
    <div id="app">
        <v-form-designer ref="vfDesigner" :field-list-api="fieldListApi" :banned-widgets="testBanned" :designer-config="designerConfig">
            <!-- 自定义按钮插槽演示 -->
            <template #customToolButtons>
                <el-button type="text" @click="saveFormJson"><i class="el-icon-finished" />保存</el-button>
            </template>
        </v-form-designer>
        <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>

<el-dialog
  title="提示"
  :visible.sync="dialogVisible"
  width="30%"
 >
    <el-form ref="formData" :model="formData" label-width="80px">
         <el-form-item label="表单名称">
    <el-input v-model="formData.FormName"></el-input>
  </el-form-item>
  <el-form-item label="创建人">
    <el-input v-model="formData.CreateName"></el-input>
  </el-form-item>
        </el-form>
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="Sureform">确 定</el-button>
</el-dialog>
    </div>
</template>
<script>
import {addform} from '@/api/form'
export default {
    name: 'App',
    data() {
        return {
            fieldListApi: {
                URL: 'https://www.fastmock.site/mock/2de212e0dc4b8e0885fea44ab9f2e1d0/vform/listField',
                labelKey: 'fieldLabel',
                nameKey: 'fieldName'
            },
             dialogVisible: false,
             formData:{ 
             },
            testBanned: [
                //'sub-form',
                //'alert',
            ],

            designerConfig: {
                languageMenu: true,
                externalLink: false,
                formTemplates: false,
                eventCollapse: false,
                clearDesignerButton: false,
                previewFormButton: false,
                //是否显示导入JSON按钮
                importJsonButton: false,
                //是否显示导出JSON器按钮
                exportJsonButton: false,
                //是否显示导出代码按钮
                exportCodeButton: false,
                //是否显示生成SFC按钮
                generateSFCButton: false,

                presetCssCode: '.abc { font-size: 16px; }'
            }
        };
    },
    methods: {
        saveFormJson() {
            let formJson = this.$refs.vfDesigner.getFormJson();
            //TODO: 将formJson提交给后端保存接口，需自行实现！！
             console.log("哇哈哈哈",formJson);
            this.formData.FormJson=JSON.stringify(formJson) ;
            console.log("jsonwaa",this.formData.FormJson)
            this.dialogVisible=true;
        },
        Sureform(){
          JSON.stringify(this.formData.FormJson);
        //   let addform={
        //       formjson:JSON.stringify(this.formData.FormJson),

        //   }
            console.log("Json表单",this.formData);
            addform(this.formData).then(res=>{
                if(res.code==200)
                {
                 this.$message.success('表单已保存！');
                 this.dialogVisible=false;
                 this.$router.push("FormList");
                }
            })
        }
    }
};
</script>

